<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:sfw="http://www.mscsoftware.com">
    <head>
        <script type="text/javascript" src="../js/persistentPlaceholder.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/placeholder.css"></link>
    </head>
<ui:composition>
    <h:panelGrid  cellspacing="10" cellpadding="0" border="0"
                 styleClass="LogonForm" id="my04">
                 
         <h:panelGrid columns="1"  cellspacing="10" cellpadding="0" border="0"
                 styleClass="LogonForm"  style="position: relative;">
                 
           
            
			<h:panelGroup>
				<div class="" 
					 style="padding-left: 5px;
							background-color: #F0F0F0; 
							margin-top:30px;
							margin-left:0px;
							"> 
					<i class="glyphicon fa fa-user fa-fw" aria-hidden="true" style="color: #b4b6ba;font-size:20px;" ></i>  
				<h:inputText id="userID" size="30" required="true" class="text" styleClass="myinputfield"
						 requiredMessage="#{i18n.prompt_username}: #{i18n.prompt_field_isRequired}"
						 value="#{logon.userID}" 
						 style="border: 1px solid  #b4b6ba;
						 margin: 0 auto 0 -28px;
						 font-size:16px; 
						 background-color:transparent;
						 padding-left:28px;
						 height:55px;
						 width:333px;
						 color:#666666;"  tabindex="1">
				<t:validateRegExpr pattern="[a-zA-Z1-9]*^[^+;]*[a-zA-Z1-9]*$" />
				</h:inputText>
				</div>
			 </h:panelGroup>
			 
            <h:panelGroup>
				<div class="" 
					 style="padding-left: 5px;
							background-color:  #F0F0F0; 
							border-width:0px;
							margin-top:30px;
							margin-left:0px;
							"> 
					<i class="glyphicon fa fa-lock fa-fw" aria-hidden="true" style="color: #b4b6ba;font-size:20px;" ></i>   
            <h:inputSecret id="password" size="30" required="true" class="text"   autocomplete = "off" styleClass="myinputfield"
                           requiredMessage="#{i18n.prompt_password}: #{i18n.prompt_field_isRequired}"
                           value="#{logon.password}" 
						   style="border: 1px solid  #b4b6ba;
						 margin: 0 auto 0 -28px;
						 font-size:16px;
						 color:#666666; 
						 width:333px;
						 background-color:transparent;
						 padding-left:28px;
						 height:55px;"  tabindex="2">
            </h:inputSecret>
			</div>
			 </h:panelGroup>
			
            <h:commandButton  action="#{logon.login}" styleClass="myinputfield loginbutton" onclick="return enableDisable(this)" oncomplete="return enableDisable(this)"
                             value="#{i18n.prompt_login}" id="login" tabindex="3" 
							 style="width:120px;height:50px;font-family:PingFangSC-Semibold;background-color:#00BEBE;border-radius: 100px;position: absolute;left:0;right:0;margin:auto;color:#fff;font-size:14px;letter-spacing: 3px;margin-top:30px;">
            </h:commandButton>
         </h:panelGrid> 
         
         <h:panelGrid columns="2">
            <h:outputLabel for="language" styleClass="Required portalName" style="display:none;">
                <h:outputText value="#{i18n.prompt_rememberme}:" />
            </h:outputLabel>
            <h:selectBooleanCheckbox style="margin-left:0px;width:16px;display:none;" value="#{logon.remember}"  dir="rtl"></h:selectBooleanCheckbox>
       
            <h:outputLabel for="language" styleClass="Required portalName" style="display:none">
                <h:outputText value="#{i18n.prompt_language}:" />
            </h:outputLabel>
            <h:selectOneMenu value="#{logon.language}" id="language" styleClass="myinputfield"
                             immediate="true" valueChangeListener="#{logon.languageChanged}"
                             onchange="smSubmitForm(this, '_self')" tabindex="4"  style="display:none">
                <f:selectItems value="#{config.languages}" />
            </h:selectOneMenu>
        </h:panelGrid>
       
        <h:panelGroup>
            <h:message for="userID" styleClass="Error" />
            <h:message for="password" styleClass="Error" />
            <h:message for="language" styleClass="Error" />
            <!--
<t:div styleClass="ErrorBox">
<noscript><h:outputText styleClass="jserror" value="#{i18n.prompt_turnOn_javascript}"></h:outputText></noscript>
<noscript><h:messages styleClass="Error"><h:outputText id="jserror"/></noscript>
<h:messages globalOnly="true" layout="table" styleClass="Error" />
</t:div>
-->
        </h:panelGroup>    
    </h:panelGrid>
      <script>
  
   function enableDisable(ele){
        setTimeout(function(){
            ele.setAttribute("disabled", true);
        }, 5);
        
        return true;
   }
</script> 
</ui:composition>
<script src="../js/basicPlaceholder.min.js" type="text/javascript">
    document.getElementById("form:userID").focus();
</script>
</html>
